I'm working on my first NEXT Js project and I'm getting this error while importing a font from URL like this.

@import url('https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700,800&display=swap');

I'm getting this issue while running dev server:

Module parse failed: Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type.
> @import url('https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700,800&display=swap');

My Next Config file:

if (typeof require !== 'undefined') {
  require.extensions['.less'] = file => { };
}

const withLess = require('@zeit/next-less'),
  nextConfig = {
    //target: 'serverless',
    env: {
      weatherApi: '',
      mapBoxApi: '',
      // port: 'http://localhost:4000/'
      // port: 'http://3.134.94.242:4000/'
      port: 'http://3.134.94.242:4000/'
    },
    onDemandEntries: {
      maxInactiveAge: 1000 * 60 * 60,
      pagesBufferLength: 5
    },
    lessLoaderOptions: {
      javascriptEnabled: true
    },
    webpack: config => config
  };

module.exports = withLess(nextConfig);

Any help would be appreciated.